<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td {
            border: 1px solid red;
        }
        
        table {
            border-collapse: collapse;
        }
        
        td {
            padding: 10px 30px;
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    //1.循环嵌套：循环里面还有循环
    //规则：外层循环一次，内层循环全部完成。
    //比如：下面的例子，外层循环一次，内层循环10次。
    // var num = 1; //初始值，执行一次。
    // while (num <= 10) { //循环体执行多次。
    //     document.write('我是外层的循环输出的语句' + num + '<br>');
    //     num++;
    //     var num1 = 1; //这里不能移到外面。每次重新从1开始。
    //     while (num1 <= 10) {
    //         document.write('&nbsp;&nbsp;&nbsp;&nbsp;我是内层的循环输出的语句' + num1 + '<br>');
    //         num1++;
    //     }
    // }

    //2.绘制10*10的表格
    // document.write('<table>');
    // var i = 1;
     

    //     document.write('</tr>');
    //     i++;
    // }
    // document.write('</table>');

    //3.
    document.write('<table border=1>');
    var i = 1;
    while (i <= 9) { //循环9次
        document.write('<tr>');

        var j = 1;
        while (j <= i) { //内层的循环和外层的次数有关。外层第1次循环，内层循环1次，外层第2次循环，内层循环2次，以此类推
            document.write('<td>' + j + 'x' + i + '=' + (i * j) + '</td>');
            j++;
        }

        document.write('</tr>');
        i++;
    }
    document.write('</table>');
</script>